<template>
  <f7-page
    :name="name"
    @page:init="onPageInit"
    @page:beforein="onPageBeforeIn"
    @page:afterin="onPageAfterIn"
    @page:beforeout="onPageBeforeOut"
    @page:afterout="onPageAfterOut"
    @page:beforeremove="pageBeforeRemove"
  >
    <f7-toolbar bottom class="toolbar-one wechat-btn">
      <f7-link @click="add()">
        <span class="link-span">保存</span>
      </f7-link>
    </f7-toolbar>

    <form class="list form-list">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">标题</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="标题" v-model.trim="title" />
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">内容</div>
              <div class="item-input-wrap">
                <textarea
                  class="resizable"
                  placeholder="内容"
                  v-model.trim="content"
                  style="min-height: 80px;"
                ></textarea>
              </div>
            </div>
          </div>
        </li>
        <add-images
          :imgList="imgUrlArr"
          :imgURI="imageURI"
          inputElId="feedbackFileUrl"
          inputAccept="image/*"
          maximum="9"
          @imagesData="changeImages"
        ></add-images>
      </ul>
    </form>
  </f7-page>
</template>

<script>
import Log from "../../mod/log.js";
import Consts from "../../assets/consts";

import strings from "../../assets/strings";
import cordova from "../../js/cordova-app";

import Alert from "../../mod/alert";
import Toast from "../../mod/toast";

import Storage from "../../mod/storage";
import AlertUtils from "../../mod/utils.alert";
import ToastUtils from "../../mod/utils.toast";
import Utils from "../../js/mod.utils";
import StringUtils from "../../js/mod.string";
import WeChatUtils from "../../js/wechat";
import Http from "../../js/mod.http";
import ConstantUtils from "../../js/vue.constant";
import Popover from "../../mod/popover";
import PickerUtils from "../../mod/utils.picker";

import AddImages from "../components/images.vue";

const name = strings.page.land.add;
const log = new Log(name);

export default {
  components: {
    AddImages,
  },
  data() {
    return {
      name: name,
      lastBackTimestamp: new Date().getTime(),
      from: "add",
      title: "",
      content: "",
      // 附件
      imageURI: [],
      imgUrlArr: [],

      id: "",
      type: "practice", // 'practice','assessment'
    };
  },

  methods: {
    onCreated() {
      let _this = this;
      log.w("onCreated");
    },
    onMounted() {
      log.w("onMounted");
      var _this = this;
    },
    onPageInit() {
      var _this = this;
      let query = Utils.getParamData(_this);
      _this.id = query.id || "";
      _this.type = query.type || "practice";
      if (_this.id != "") {
        _this.getQueryInfo();
      }
    },
    onPageBeforeIn() {
      log.w("onPageBeforeIn");
    },
    onPageAfterIn() {
      log.w("onPageAfterIn");
      var _this = this;
      Utils.setTitle(_this, _this.pageTitle);
      Utils.setBack(_this, function (e) {
        var title = _this.title;
        var content = _this.content;
        var imageURI = _this.imageURI;
        if (title != "" || content != "" || imageURI.length > 0) {
          AlertUtils.alert.show(
            AlertUtils.param.alert({
              title: "是否保存？",
              buttons: [
                {
                  onClick() {
                    // 否
                    _this.onBack();
                  },
                },
                {
                  onClick() {
                    // 是
                    _this.add();
                  },
                },
              ],
            })
          );
        } else {
          _this.onBack();
        }
      });
    },
    onAlertConfirm(dialog, e) {
      log.d("confirm", dialog, e);
    },
    onAlertCancel(dialog, e) {
      log.d("cancel", dialog, e);
    },
    onPageBeforeOut() {
      log.w("onPageBeforeOut");
    },
    pageBeforeRemove() {
      log.w("pageBeforeRemove");
      let _this = this;
    },
    onPageAfterOut() {
      log.w("onPageAfterOut");
    },
    onDestroyed() {
      log.w("onDestroyed");
    },
    onUpdated() {
      log.w("onUpdated");
    },
    onBack() {
      let _this = this;
      log.w("onBack");
      _this.$f7router.back();
    },
    onResume() {
      log.w("onResume");
    },
    onPause() {
      log.w("onPause");
    },
    getQueryInfo() {
      let _this = this;
      let data = {
        id: _this.id,
        openid: _this.$f7.data.openid,
      };
      let _successQuery = (res) => {
        let resData = res.data || {};
        _this.from = "update";
        _this.title = resData.title || "";
        _this.content = resData.content || "";
        let image = resData.image || [];
        let imageURI = [];
        let imgUrlArr = [];
        if (image.length > 0) {
          for (var i in image) {
            imageURI.push(image[i].id);
          }
          _this.imageURI = imageURI;
          _this.imgUrlArr = image;
        }
      };
      let params = {
        url: Http.kInterfacePath.story.query,
        data: data,
        warn_error: "获取详情失败！",
        success: _successQuery,
      };
      Http.ajax(_this, params);
    },

    add: function () {
      var _this = this;
      var title = _this.title;
      var content = _this.content;
      var imageURI = _this.imageURI;
      var imgUrlArr = _this.imgUrlArr;

      if (title == "") {
        ToastUtils.toast.show(
          ToastUtils.param.toast({
            text: strings.toast["not-null"]["title"],
          })
        );
        return false;
      }
      if (content == "") {
        ToastUtils.toast.show(
          ToastUtils.param.toast({
            text: strings.toast["not-null"]["content-null"],
          })
        );
        return false;
      }

      var data = {
        id: _this.id,
        openid: _this.$f7.data.openid,
        type: _this.type,
        title: title,
        content: content,
        images: imageURI,
      };
      let url = Http.kInterfacePath.story.add;
      if (_this.from == "update") {
        url = Http.kInterfacePath.story.update;
      }
      let params = {
        url: url,
        data: data,
        type: Http.httpType.post,
        success: _successFun,
      };
      Http.ajax(_this, params);
      function _successFun(res) {
        if (res.result == 0) {
          var data = res.data;
          ToastUtils.toast.show(
            ToastUtils.param.toast({
              text: strings.toast["submit-successfully"],
            })
          );
          if (_this.from == "update") {
            Utils.fireEvent(_this, Utils.kEvents.updateStoryDetail, {});
          } else {
            Utils.fireEvent(_this, Utils.kEvents.updateStoryList, {});
          }
          _this.onBack();
        } else {
          ToastUtils.toast.show(
            ToastUtils.param.toast({ text: strings.toast["submit-error"] })
          );
        }
      }
    },
    // 附件
    changeImages: function (_data) {
      let _this = this;
      _this.imageURI = _data.imagesURI ? _data.imagesURI : [];
      _this.imgUrlArr = _data.imagesUrlArr ? _data.imagesUrlArr : [];
    },
  },
  created() {
    this.onCreated();
  },
  updated() {
    this.onUpdated();
  },
  destroyed() {
    this.onDestroyed();
  },
  mounted() {
    this.onMounted();
  },
};
</script>
